<template>
    <h1>会员列表展示</h1>
   
    <div>
        会员名称：
        <input type="text" v-model="cord.name">
      
        会员等级名称：
        <select v-model="cord.mid">
                        <option value="0">请选择</option>
                        <option v-for="a in find" :value="a.mid">{{a.name  }}</option>
                       </select>
        <input type="button" value="查询" @click="Show">
       
      <table class="table">
        <thead>
            <tr>
            <td>会员名称</td>
            <td>年龄</td>
            <td>密码</td>
            <td>头像</td>
            <td>手机号</td>
            <td>性别</td>
            <td>会员状态</td>
            <td>会员等级</td>
            <td>操作</td>
        </tr>
        </thead>
        <tbody>
            <tr v-for="a in data">
                <td>{{a.name  }}</td>
                <td>{{ a.age }}</td>
                <td>{{ a.pos }}</td>
                <td> <img :src="'https://localhost:7083/'+a.img" style="height: 100px;width: 100px;"></td>
                <td>{{ a.phone }}</td>
                <td>{{ a.sex?"男":"女" }}</td>
                <td>{{a.start?"启用":"禁用"  }}</td>
                <td>{{a.mid  }}</td>
                <td><input type="button" :value="a.start?'禁用':'启用' " @click="upsta(a.id)">
                      
                        <input type="button" value="编辑" @click="UptQu(a.id)"></td>
            </tr>
        </tbody>
      </table>
      <span>
            共{{ total.totalpage }}页，当前第{{cord.size  }}页，共{{total.count  }}行，每页{{cord.index  }}行
        </span>
        <input type="button" value="首页" @click="Fanye(1)">
        <input type="button" value="上一页" @click="Fanye((cord.index)-1)">
        <input type="button" v-for="m in total.totalpage" :value="m" @click="fe(m)">
        <input type="button" value="下一页" @click="Fanye((cord.index)+1)">
        <input type="button" value="尾页" @click="Fanye(total.totalpage)">
         <select v-model="cord.size" @click="fs">
            <option value="2">请选择</option>
            <option value="3">每页三行</option>
            <option value="5">每页五行</option>
            <option value="6">每页六行</option>
         </select>
         跳转：
         <input type="number" v-model="teta">
         <input type="button" value="跳转"  @click="Fanye(teta)">
    </div>
   
</template>
<script setup lang="ts">
import {ref,onMounted} from "vue"
import axios from "axios";
import { useRouter } from "vue-router";
const router=useRouter();
const UptQu=(val:number)=>{
  router.push({path:"/UptUserView",query:{id:val}})
}
const find=ref([{
    "mid": 0,
  "name": "",
  "qid": 1,
  "start": true
}])
const fe=(val:any)=>{
    cord.value.index=val;
    Show();
}
const fs=()=>{
    cord.value.index=1;
    Show();
}
const total=ref({
    count:0,
    totalpage:0
})
const Xialak=()=>{
    axios.get("https://localhost:7083/api/User/Xiala").then(res=>{
        find.value=res.data
    })
}
const Fanye=(val:any)=>{
   if(val>=1 && val<=total.value.totalpage)
   {
     cord.value.index=val;
     Show();
   }
}
onMounted(()=>{
    Show();
    Xialak();
})
const data=ref([{
    "id": 0,
  "name": "",
  "age": "",
  "pos": "",
  "img": "",
  "phone": "",
  "sex": 0,
  "start": true,
  "mid": 0
}])
const Show=()=>{
axios.get("https://localhost:7083/api/User/Getuser",{params:cord.value}).then(res=>{
   data.value=res.data.data
   total.value.count=res.data.count
   total.value.totalpage=Math.ceil(total.value.count/cord.value.size);

})
}
const cord=ref({
    name:"",
    mid:0,
    index:1,
    size:2,
  

})
const upsta=(id:any)=>{
    if(!confirm('确认修改吗')){
        return;
    }
    axios.get("https://localhost:7083/api/User/UptStart",{params:{id:id}}).then(res=>{
    if(res.data>0){
        alert('修改成功');
        Show();
    }
    else{
        alert('修改失败');
    }
    })
}
</script>
<style scoped></style>